<template>
  <!-- 头部导航栏 -->
  <el-header
    style="
      text-align: right;
      font-size: 12px;
      width: 100%;
      height: 51px;
      background: #ffffff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    "
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="16" style="margin-top: 20px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/backmanage' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ titleName }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ subtitleName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col
        :span="4"
        :offset="4"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <img
          v-if="userPicture"
          :src="userPicture"
          alt=""
          width="40"
          height="40"
          style="border-radius: 50%"
        />
        <img
          v-else
          src="http://localhost:3000/uploads/1730337521336.jpg"
          alt=""
          width="40"
          height="40"
          style="border-radius: 50%"
        />
        <span style="color: #000000; line-height: 51px"
          >{{ userName }} 欢迎回来!</span
        >
        <!-- handleClick -->
        <el-dropdown style="line-height: 51px">
          <span class="el-dropdown-link">
            <i class="el-icon-setting"></i>设置<i
              class="el-icon-arrow-down el-icon--right"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span @click="to_xuigai">修改信息</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="logout">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
import { mapState } from "vuex";
// 确保 http 模块已经正确导入
import http from "../api/http";

export default {
  data() {
    return {
      titleName: "",
      subtitleName: "",
    };
  },
  computed: {
    ...mapState(["name", "picture"]),
    userName() {
      return this.name;
    },
    userPicture() {
      return this.picture;
    },
  },
  methods: {
    // 跳转到修改信息页面
    to_xuigai() {
      this.$router
        .push("/backmanage/EditInfo")
        .then(() => {
          this.$message({
            type: "success",
            message: "已经到修改信息页面!",
          });
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "warning",
            message: "网页跳转失败!或您已在当前页面",
          });
        });
    },
    // 退出登录--方法
    logout() {
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const token = localStorage.getItem("token");
          // 假设http是一个已经配置好的axios实例
          http
            .get("/user/logout", {
              headers: {
                Authorization: token,
              },
            })
            .then((res) => {
              console.log(res);
              const token = res.token;
              localStorage.setItem("token", token);
              localStorage.setItem("token_is_exp", 1);
              localStorage.removeItem("account");
              localStorage.removeItem("repaire");
              // localStorage.clear();
              this.$router
                .push("/login")
                .then(() => {
                  this.$message({
                    type: "success",
                    message: "已经安全退出!",
                  });
                })
                .catch((err) => {
                  console.log(err);
                  this.$message({
                    type: "success",
                    message: "已经安全退出!网页跳转失败",
                  });
                });
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },
  mounted() {
    this.titleName = this.$route.meta.title;
    this.subtitleName = this.$route.meta.sub_title;
    console.log(this.$route, this.$route.meta);
  },
};
</script>

<style>
</style>